<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id='a'>+</button>
    <span id='num'></span>
    <button id='b'>-</button>
</body>

</html>
<!-- <script src="./eruda.js"></script>
<script>
    eruda.init();
</script> -->
<script>
    let activeEffect;
    class Dep {
        subscribers = new Set();
        depend() {
            // 添加属性 值
            if (activeEffect) {
                this.subscribers.add(activeEffect);
            }
        }
        notify() {
            this.subscribers.forEach((effect) => {
                console.log(effect);
                effect();
            })
        }
    }
    let WeakMapObj = new WeakMap();
    function getDep(target, key) {
        // ????
        let deepMap = WeakMapObj.get(target);
        console.log(WeakMapObj, deepMap, key);
        if (!deepMap) {
            deepMap = new Map();
            WeakMapObj.set(target, deepMap);
        }
        let dep = deepMap.get(key);
        if (!dep) {
            dep = new Dep();
            console.log(dep, deepMap, 43, key);
            deepMap.set(key, dep);
        }
        return dep;
    }
    let proxyObj = new Proxy({
        frist: 2
    }, {
        get(target, key, reciver) {
            const dep = getDep(target, key);
            console.log(dep, 'dep');
            dep.depend();
            console.log(Reflect.get(target, key, reciver), 'reflect');
            return Reflect.get(target, key, reciver);
        },
        set(target, key, value, reciver) {
            const dep = getDep(target, key);
            let res = Reflect.set(target, key, value, reciver);
            dep.notify();
            return res;
        }
    });


    function watchEffect(effect) {
        console.log("监听器");
        activeEffect = effect
        effect()
        activeEffect = null
    }


    function showData() {
        return false;
        document.getElementById('num').innerHTML = proxyObj.frist
    }

    watchEffect(showData)

    let aNode = document.getElementById("a");
    let bNode = document.getElementById("b");
    a.addEventListener("click", () => {
        proxyObj.frist++;
        console.log(proxyObj);
    });
    b.addEventListener("click", () => {
        proxyObj.frist--;
    })
</script>